<template>
  <div class="menu">
    <div class="menu-search" @click="GoSearch">
      <nut-searchbar disabled>
        <template v-slot:leftin>
          <Search2 />
        </template>
      </nut-searchbar>
    </div>
    <div class="menu-section">
      <div class="menu-section-menuList">
        <template v-for="(item, idx) in menuListData" :key="idx">
          <div :class="{
            'menuList-itemActive': item.isActive
          }" class="menuList-item" @click="MenuClick(item)">
            <div>{{ item.name }}</div>
          </div>
        </template>
      </div>
      <div class="menu-section-commodityList">
        <template v-for="(item, idx) in commodityListData" :key="idx">
          <div class="commodityList-item" @click="GoCommodityDetails(item)">
            <Image class="commodityList-item-img" :src="item.bannerImgs[0]"></Image>
            <div class="commodityList-item-content"> 
              <p class="content-name">{{ item.name }}</p>
              <p class="content-price">¥<span>{{ item.price }}</span></p>
            </div>
          </div>
        </template>
      </div>
      <!-- <nut-category class="menu-broadsideList-list" :category="category" @change="MenuChange">
        <nut-category-pane class="list-item" :categoryChild="categoryChild" @onChange="onChange">
        </nut-category-pane>
      </nut-category> -->
    </div>
  </div>
</template>

<script>
import { reactive, toRefs,onMounted } from 'vue';
import './index.scss';
import { GetMenuList,GetProduce } from '../utils/api.js' 
import Taro from '@tarojs/taro'
import { Search2 ,Cart } from '@nutui/icons-vue-taro';
export default {
  name: 'Index',
  components: {
    Search2,Cart
  },
  setup(){
    const state = reactive({
      text: '',
      menuListData: [],
      commodityListData: [ ],
      cartNum: 6, // 购物车内商品总数量
    });
    const GetMenuData = async () => {
      let menuList = await GetMenuList({})
      if(menuList.code == 200) {
        state.menuListData = menuList.data.list.map((res, index) => {
            return Object.assign({
              isActive: index == 0 ? true : false
            }, res)
        });
        GetGoodsData(menuList.data.list[0].code);
      }
    }
    const GetGoodsData = async (tarCode) => {
      let commodityList =  await GetProduce({
        menu: tarCode
      })
      if(commodityList.code == 200) {
        state.commodityListData = commodityList.data.list;
      }
    }
    onMounted(() => {
      GetMenuData();
    });
    const GoSearch = () => {
      Taro.navigateTo({
          url: `/pages/searchGoods/index`
      })
    }
    const MenuClick = async (tarMenuVal) => {
      state.menuListData = state.menuListData.map(res => {
        if(tarMenuVal.code == res.code) {
          res.isActive = true
        } else {
          res.isActive = false
        }
        return res;
      })
      GetGoodsData(tarMenuVal.code);
    };
    const GoCommodityDetails = (tarCommodityVal) => {
      Taro.navigateTo({
          url: `/pages/commodity-details/index?commodityId=${tarCommodityVal.id}`
      })
    }

    return {
      GoSearch,
      MenuClick,
      GoCommodityDetails,
      ...toRefs(state),
    }
  }
}
</script>
  